<template>
  <AntButton
    size="small"
    :loading="loading"
    @click="onClick"
    v-bind="$attrs"
    :class="{
      'is-plain': plain
    }"
    :disabled="localCountdown > 0 ? true : $attrs.disabled"
  >
    <slot />
    <template v-if="localCountdown > 0">
      <span>（{{ localCountdown }}）</span>
    </template>
  </AntButton>
</template>
<script>
import { Button as AntButton } from 'ant-design-vue'
export default {
  name: 'AButton',
  components: { AntButton },
  props: {
    throttle: {
      type: Number,
      default: 500
    },
    countdown: {
      type: Number,
      default: 0
    },
    plain: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  data() {
    return {
      timer: null,
      loading: false,
      localCountdown: this.countdown
    }
  },
  methods: {
    btnCountDown() {
      const countdownTimer = setInterval(() => {
        if (this.localCountdown > 0) {
          this.localCountdown--
        } else {
          clearInterval(countdownTimer)
        }
      }, 1000)
    },
    async onClick(e) {
      if (!this.throttle) {
        this.$emit('click', e)
        return false
      }
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (this.loading) {
        return false
      }
      this.loading = true
      this.$emit('click', e)
      this.timer = setTimeout(() => {
        this.loading = false
      }, this.throttle)
    }
  },
  mounted() {
    this.localCountdown > 0 && this.btnCountDown()
  }
}
</script>
<style lang="less" scoped>
.ant-btn-primary,
.ant-btn-primary.is-plain:hover {
  background: #1890ff !important;
  border-color: #1890ff !important;
  color: #fff !important;
}
.ant-btn-primary.is-plain {
  color: #1890ff !important;
  background: #e8f4ff !important;
  border-color: #a3d3ff !important;
}
.btn-success,
.btn-success.is-plain {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.btn-success.is-plain {
  color: #389e0d !important;
  background: #f6ffed !important;
  border-color: #b7eb8f !important;
}

.ant-btn-link.btn-success {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #67c23a !important;
}
.ant-btn-background-ghost.ant-btn-primary {
  color: #1890ff !important;
  background: transparent !important;
  border-color: #1890ff !important;
  text-shadow: none !important;
}
.ant-btn-background-ghost.btn-success {
  color: #67c23a !important;
  background: transparent !important;
  border-color: #67c23a !important;
  text-shadow: none !important;
}
.ant-btn-background-ghost.ant-btn-primary {
  color: #1890ff !important;
  background: transparent !important;
  border-color: #1890ff !important;
  text-shadow: none !important;
}

.btn-warning,
.btn-warning.is-plain:hover {
  background-color: #faad14 !important;
  border-color: #faad14 !important;
  color: #fff !important;
}

.btn-warning.is-plain {
  color: #ffba00 !important;
  background: #fff8e6 !important;
  border-color: #ffe399 !important;
}

.ant-btn-link.btn-warning {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #e6a23c !important;
}

.ant-btn-background-ghost.btn-warning {
  color: #e6a23c !important;
  background: transparent !important;
  border-color: #e6a23c !important;
  text-shadow: none !important;
}

.btn-danger,
.btn-danger.is-plain:hover {
  background-color: rgb(245, 108, 108) !important;
  border-color: #f56c6c !important;
  color: #fff !important;
}
.btn-danger.is-plain {
  color: #ff9292 !important ;
  background-color: #ffeded !important;
  border-color: #ffdbdb !important;
}

.ant-btn-link.btn-danger {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #f56c6c !important;
}
.ant-btn-background-ghost.btn-danger {
  color: #f56c6c !important;
  background: transparent !important;
  border-color: #f56c6c !important;
  text-shadow: none !important;
}

.btn-info,
.btn-info.is-plain:hover {
  background-color: #909399 !important;
  border-color: #909399 !important;
  color: #fff !important;
}
.btn-info.is-plain {
  color: #909399 !important;
  background: #f4f4f5 !important;
  border-color: #d3d4d6 !important;
}

.ant-btn-link.btn-info {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #909399 !important;
}
.ant-btn-background-ghost.btn-info {
  color: #909399 !important;
  background: transparent !important;
  border-color: #909399 !important;
  text-shadow: none !important;
}
.ant-btn-primary,
.btn-danger,
.btn-warning,
.btn-success {
  &.ant-btn-background-ghost[disabled],
  &.ant-btn-background-ghost[disabled]:hover,
  &.ant-btn-background-ghost[disabled]:focus,
  &.ant-btn-background-ghost[disabled]:active {
    opacity: 0.6;
  }

  &.ant-btn-primary[disabled],
  &.ant-btn-primary[disabled]:hover,
  &.ant-btn-primary[disabled]:focus,
  &.ant-btn-primary[disabled]:active {
    opacity: 0.6;
  }
  &.ant-btn-link[disabled],
  &.ant-btn-link[disabled]:hover,
  &.ant-btn-link[disabled]:focus,
  &.ant-btn-link[disabled]:active {
    opacity: 0.6;
  }
}
</style>

<style>
.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-left: 5px;
}
</style>
